<template>
    <div class="waterfalls">
        <div id="waterfalls-left">
        </div>
        <div id="waterfalls-right">
            <div class="logo-box" @click="goPhoto" v-if="photos && photos.length!=0">
                <div class="convphoto-title">随手拍</div>
                <div class="convphoto-subtitle">
                    <i class="line"></i>获取城市积分
                    <i class="line"></i>
                </div>
            </div>
        </div>
        <!--<ul id="items">
                <li v-for="photo in photos">
                    <router-link :to="'detail/'+photo.id">
                        <img :src="photo.src" alt="">
                        <span v-show="photo.isDel" @click.stop.prevent="noLink">{{photo.delDesc}}</span>
                    </router-link>
                    <div class="desc-info">
                        <p>编号：
                            <span>{{photo.numbering}}</span>
                        </p>
                    </div>
                </li>
            </ul>-->
        <div class="com-errorPage" v-if="photos && photos.length==0" @click="goPhoto">
            <p class="erroricon"><i class="icon icon-nodata"></i></p>
            <p class="errormsg" >您还没有随手拍</p>
        </div>
        <div id="items" v-show="false">
            <div v-for="item in photos" class="photo-container">
                <div class="img-box" @click="godetail(item.id)">
                    <img :src="item.photo | thumbnail('_388_10000_100_0') " @load="arrange">
                </div>
                <div class="subinfo-box">
                    <span class="title" @click="godetail(item.id)" v-text="item.title "></span>
                    <span class="vote-box" :class="{'active': item.praised}">
                        <i :class="{'vote-icon': true}"></i>
                        <i class="vote-num" v-text="item.praiseCount"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import index from './index';
    export default index;
</script>


<style lang="less" scoped>
#waterfalls-right,
#waterfalls-left {
    float: left;
    width: 50%;
}

#waterfalls-left {
    padding-left: 15px;
    padding-right: 6px
}

#waterfalls-right {
    padding: 78px 15px 0 5px;
    position: relative
}

@width: 167px;
.waterfalls {
    padding-top: 11px;
}


.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}

.logo-box {
    position: absolute;
    width: 167px;
    height: 70px;
    right: 15px;
    top: 0;
    background: url('../img/plogo.png') no-repeat center;
    background-size: cover;
}

.convphoto-title {
    margin-top: 14px;
    text-align: center;
    font-family: STHeitiSC-Medium;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.53px;
}

.convphoto-subtitle {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: -0.47px;
    line-height: 18px;
    margin-top: 5px;
    text-align: center;
}

.line {
    display: inline-block;
    width: 16px;
    height: 1px;
    opacity: 0.56;
    background: #FFFFFF;
    vertical-align: middle;
    margin: 0 3px;
}

.img-box {
    line-height: 0;
    // min-height: 100px;
}

.subinfo-box {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #000000;
    line-height: 18px;
    margin: 8px 0 14px 0;
    overflow: hidden;
}

.title {
    float: left;
    display: block;
    width: 94px;
    height: 18px;
    overflow: hidden;
}

.vote-box {
    float: right;
    font-size: 0;
    display: block;
}


.vote-box .vote-icon {
    background: url('../img/novote.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-top: -3px;
}

.vote-box.active .vote-icon {
    background: url('../img/vote.png') no-repeat center;
    background-size: cover;
}

.vote-box .vote-num {
    font-size: 14px;
    color: #868686;
     margin-left: 5px;
    vertical-align: middle;
}

.vote-box.active .vote-num {
    color: #DF3031;
}

</style>
